<template>
    <div class="content-body">
        <indexSearch @create="$refs.indexCreate.Open({})" @search="searchData"/>
        <el-table :data="tableData" row-key="id" border>
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="user_name" label="用户名" />

            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                    <el-switch @change="changeStatus(scope.row)" :model-value="!!scope.row.status"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" width="165" :formatter="$func.tableTime" />
            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-link type="primary" icon="Edit" class="mr-1" v-hasPerm="['system:user:edit']"
                        @click="$refs.indexCreate.Open(scope.row)">修改</el-link>
                </template>
            </el-table-column>
        </el-table>
        <page :pageTotal="count" @get-list="searchPage" />
        <indexCreate ref="indexCreate" @refresh="initData"/>
    </div>
</template>
<script>
import page from '@/components/page.vue'
import indexCreate from './index_create.vue'
import indexSearch from './index_search.vue'
export default {
    data() {
        return {
            tableData: [],
            count: 0,
            forms: {
                page: 1,
                limit: 10,
            },
        }
    },
    methods: {
        // 页面初始化
        initData() {
            var that = this
            that.$http.get('/user/list', { params: that.forms }).then(res => {
                that.count = res.total
                that.tableData = res.data
            })
        },
        // 分页数据加载
        searchPage(res) {
            this.forms.page = res.page
            this.forms.limit = res.limit
            this.initData()
        },
        // 搜索事件
        searchData(res = {}){
            res.page = this.forms.page || 1
            res.limit = this.forms.limit || 10
            if(res.status == 0){
                res.status = -1
            }
            this.forms = res
            this.initData()
        },
        // 状态修改事件
        changeStatus(row={}){
            if(row.id == 1){
                this.$func.error("抱歉，禁止修改超级管理员的状态标识")
                return 
            }
            let that = this
            let rows = JSON.parse(JSON.stringify(row))
            rows.status = rows.status === 1 ? 0 : 1;
            that.$http.post('/user/create',rows).then(res => {
                that.$func.success('状态变更成功')
                row.status = rows.status
            })
        },
    },
    mounted() {
        this.initData()
    },
    components: {
        page,
        indexCreate,
        indexSearch,
    }
}
</script>
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>